<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <el-dialog
        :close-on-click-modal="false"
        title="撤销流程"
        :visible.sync="resolveDialog"
        :destroy-on-close="true"
        :modal-append-to-body="false"
        width="500px"
        @close="crud.toQuery"
      >
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="原因" prop="reason">
            <el-input v-model="form.reason" type="textarea" rows="3" placeholder="请输入原因" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="resolveDialog = false">取消</el-button>
          <el-button type="primary" @click="revokeTask">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        size="small"
        border
        style="width: 100%;"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="flowName" label="流程名称" />
        <el-table-column prop="flowType" label="流程类别" />
        <el-table-column prop="version" label="版本" />
        <el-table-column prop="startTime" label="提交时间" />
        <el-table-column prop="flowStatus" label="流程状态" />
        <el-table-column label="耗时">
          <template v-slot="scope">
            {{ secondsToHours(scope.row.durationInMillis) }}
          </template>
        </el-table-column>
        <el-table-column prop="activity" label="当前节点" />
        <el-table-column label="操作" width="150px" align="center">
          <template v-slot="scope">
            <el-button type="text">详情</el-button>
            <el-button type="text" @click="revokeDialog(scope.row.id)">撤销</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation.vue'
import crudOperation from '@crud/CRUD.operation.vue'
import udOperation from '@crud/UD.operation.vue'
import pagination from '@crud/Pagination.vue'
import IconSelect from '@/components/IconSelect/index.vue'
import { mapGetters } from 'vuex'
import { revokeTask } from '@/api/flow/processInstance'

const defaultForm = {
  id: null,
  flowName: null,
  flowType: null,
  version: null,
  startTime: null,
  durationInMillis: null,
  flowStatus: null,
  activity: null,
  reason: null
}
export default {
  name: 'ProcessInstance',
  components: { IconSelect, pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  cruds() {
    return CRUD({
      title: '系统：我的发起',
      url: 'api/processTask/myInitiation',
      idField: 'id',
      sort: 'id',
      queryOnPresenterCreated: false
    })
  },
  created() {
    this.crud.params = { userId: this.user.id }
    this.crud.toQuery()
  },
  data() {
    return {
      rules: {
        reason: [
          { required: true, message: '请输入原因', trigger: 'blur' }
        ]
      },
      resolveDialog: false,
      flowId: ''
    }
  },
  methods: {
    secondsToHours(millisecond) {
      const seconds = Math.floor(millisecond / 1000)
      const hours = Math.floor(seconds / 3600)
      const minutes = Math.floor((seconds % 3600) / 60)
      const remainingSeconds = seconds % 60
      return `${hours}小时 ${minutes}分钟 ${remainingSeconds}秒`
    },
    revokeDialog(id) {
      this.flowId = id
      this.resolveDialog = true
    },
    revokeTask() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.visible = false
          const data = {
            id: this.flowId,
            reason: this.form.reason
          }
          revokeTask(data).then(res => {
            this.crud.notify('撤回成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
            this.crud.toQuery()
          })
        } else {
          return false
        }
      })
    }
  }
}

</script>

<style scoped>

</style>
